<template>
  <el-dialog
    :title="title"
    :visible.sync="isShowModel"
    width="80%"
    :before-close="handleClose"
  >
    <div class="modelContainer">
      <div class="modelItem" v-for="(item, index) in tableData" :key="index">
        <div class="item">
          <span>用户名：</span>
          <div class="input">
            <el-input v-model="item.username" size="small"></el-input>
          </div>
        </div>
        <div class="item">
          <span>密码：</span>
          <div class="input">
            <el-input v-model="item.password" size="small"></el-input>
          </div>
        </div>
        <div class="item">
          <span>身份：</span>
          <div class="input">
            <el-select v-model="item.type" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>
        </div>

        <div class="options" v-if="isShowAddIcon">
          <div class="iconfont icon-icon_tianjia" @click="addItem"></div>
          <div
            class="iconfont icon-jian-xianxingyuankuang"
            @click="popItem(index)"
          ></div>
        </div>
      </div>
    </div>

    <span slot="footer" class="dialog-footer">
      <el-button @click="handleClose">取 消</el-button>
      <el-button type="primary" @click="hadkeSubmit(actionType)"
        >提 交</el-button
      >
    </span>
  </el-dialog>
</template>

<script>
import { batchAddUser, batchUpdateUser } from "@/utils/api";
import { toRaw } from "vue";
export default {
  props: {
    isShowModel: Boolean,
    title: String,
    optionType: String,
    selectionData: {
      type: Array,
      default: () => [],
    },
    onceEdit: Boolean,
  },
  data() {
    return {
      tableData: [
        {
          username: "",
          password: "",
          type: "user",
          avatar: "",
        },
      ],
      options: [
        {
          value: "admin",
          label: "管理员",
        },
        {
          value: "user",
          label: "学生",
        },
      ],
    };
  },
  computed: {
    actionType() {
      return this.$props.optionType || "other";
    },
    isShowAddIcon() {
      return this.actionType === "add";
    },
  },
  watch: {
    isShowModel(newVal) {
      if (newVal && this.actionType === "update") {
        this.tableData = this.$props.selectionData;
      }
    },
  },
  methods: {
    handleClose() {
      this.$emit("close");
      if (this.$props.onceEdit) {
        this.$emit("clear");
      }
    },
    hadkeSubmit(type) {
      switch (type) {
        case "add":
          this.actionAdd();
          break;
        case "update":
          this.actionUpdate();
          break;
        default:
          this.$message.warning("按钮业务为拓展！！");
          break;
      }
    },
    async actionAdd() {
      let data = this.tableData;
      for (let i = 0; i < data.length; i++) {
        const item = toRaw(data[i]);
        if (!item.username || !item.password) {
          this.$message.error(`第${i + 1}行中数据不能为空！`);
          return;
        }
      }

      // 新增用户接口
      try {
        let message = await batchAddUser({
          users: JSON.stringify(data),
        });
        this.$message.success(message);
        this.$emit("close");
        this.$emit("request");
        this.$emit("clear");
      } catch (err) {
        this.$message.error(err.message);
      }
    },
    async actionUpdate() {
      let data = this.tableData;
      for (let i = 0; i < data.length; i++) {
        const item = toRaw(data[i]);
        if (!item.username || !item.password) {
          this.$message.error(`第${i + 1}行中数据不能为空！`);
          return;
        }
      }

      // 更新用户接口
      try {
        let message = await batchUpdateUser({
          users: JSON.stringify(data),
        });
        this.$message.success(message);
        this.$emit("close");
        this.$emit("request");
        this.$emit("clear");
      } catch (err) {
        this.$message.error(err.message);
      }
    },
    addItem() {
      this.tableData.push({
        username: "",
        password: "",
        type: "user",
        avatar: "",
      });
    },
    popItem(index) {
      if (this.tableData.length == 1) {
        this.$message.warning("已经最后一个了");
        return;
      }
      this.tableData.splice(index, 1);
    },
  },
};
</script>

<style lang="less" scoped>
.modelContainer {
  .modelItem {
    display: flex;
    align-items: center;
    margin-top: 10px;
    justify-content: space-around;

    .options {
      display: flex;
      .icon-icon_tianjia {
        cursor: pointer;
        margin-right: 10px;
      }
      .icon-jian-xianxingyuankuang {
        cursor: pointer;
      }
    }
    .item {
      display: flex;
      align-items: center;
      .input {
        width: 200px;
      }
    }
  }
}
</style>